<template>
    <div class="responsibility">
      <a ref="down" :href="url" style="display:none;" download="责任认定书"></a>
       <!-- 查看 下载 -->
       <div class="res-top">
           <div v-if="isAndroid" @click="seeBook(1)">
               <img src="../../assets/img/bg-see.png" alt="">
               <p>查看</p>
               <span>责任认定书</span>
           </div>
           <div @click="downPdf()">
                <img src="../../assets/img/bg-download.png" alt="">
                <p>下载</p>
                <span>责任认定书 | 1.2M</span>
           </div>
       </div>

       <!-- 二维码内容 -->
       <div class="res-qrcode">
               <img class="res-qrcode-item" :src="imgUrl" alt="">
               <p class="res-qrcode-text res-first">可保存二维码，或关注微信公众号,</p>
               <p class="res-qrcode-text">通过手机号查看案件记录</p> 
       </div> 

       <!-- 按钮 -->
        <div v-if="isShow" class="btnSec">
            <button class="submit" @click="toHomePage">一键报案</button>
        </div>
    </div>
</template>

<script>
import home_test from '../../assets/img/home_test.png';    
import home from '../../assets/img/home.png';
import {http} from 'utils/request.js';
import api from '../../api/index.js';
let Base64 = require('js-base64').Base64
export default {
  name:"responsibility",
  data() {
    return {
        isAndroid: true,
        url: '',
        accidentNo: "",
        imgUrl: '',
        isShow: '',
    }
  },
  created() {
      const accidentNo = this.$route.query.accidentNo;
      this.accidentNo = accidentNo;
      this.$route.query.fromPage == 'handleType' ? this.isShow = 0 : this.isShow = 1;
  },
  mounted() {
        if (/(Android)/i.test(navigator.userAgent)) {  //判断Android
            this.isAndroid = false
        }
        this.getPDFUrl();
        // 修改title
        document.title = '责任认定书';
        let flag = window.location.href.indexOf('test');
        if(flag>0) {
            this.imgUrl = home_test;
        } else {
            this.imgUrl = home;
        }
  },
  methods: {
    seeBook () {
      if(!this.url) {
        this.$toast.message({
								message: "无法获取责任认定书",
								color: "#F57979"
				});
        return;
      }
      location.href = this.url;
      // this.$router.push({ path: 'pdfpreview', query: { url: Base64.encode(this.url) } })
    },
    toHomePage() {
      this.$router.push({
        name:'reportAccept',
        query:{

        }
      });
    },
    //pdf查看下载
    getPDFUrl(flag) {
      http.post(api.API_GET_PDF_URL,{
          accidentNo: this.accidentNo, //事故编号
      }).then(((res) => {
            if(res.code==1) {
              this.url = res.resultObj;
            }else if(res.code==0) {
							this.$toast.message({
								message: res.message,
								color: "#F57979"
							});
						}
      })).catch((error) =>{
          console.log(error);
      });
    },
    downPdf() {
      this.$refs.down.click();
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~assets/css/mixin.scss";
.responsibility {
  background-color: #f5f5f8;
  display: flex;
  flex-direction: column;
  align-items:center;
  min-height: 100%;
  .res-top {
    width: 94%;
    margin: 0 auto;
    > div {
      position: relative;
      height: rem(112);
      background-color: #6794F5;
      margin-top: rem(15);
      border-radius: rem(5);
      img {
        position: absolute;
        right: rem(15);
        bottom: 0;
        width: rem(80);
      }
      p {
        padding: rem(30) 0 rem(5) rem(20);
        font-size: rem(22);
        color: #fff;
      }
      span {
        font-size: rem(14);
        margin-left: rem(20);
        color: #9fb7f1;
      }
    }
  }
  .res-qrcode {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .res-qrcode-item {
      width: rem(140);
      border: 1px solid gray;
    }
    .res-first {
        margin-top: rem(15);
    }
    .res-qrcode-text {
      font-size: rem(12);
      line-height: rem(18);
      color: #8D9093;
    }
  }
  .submit {
    display: block;
    width: 3.45rem;
    height: 0.48rem;
    margin: 0.2rem auto;
    background-color: #6794f5;
    color: #fff;
    border: none;
    border-radius: 0.05rem;
    font-size: 0.18rem;
  }
}
</style>
